<template>
	<view>
		
		<u-subsection :list="[{name:'未读消息'},{name:'已读消息'}]" @change="change" :current="current"></u-subsection>
		<!-- 未读信息 -->
	    <view v-if="current==0">
			<u-cell-group v-if="this.publicMsg && this.publicMsg.filter(f=>!f.isRead).length" title="公告">
				<u-read-more :toggle="true">
					<u-cell-item style="padding: 5rpx 5rpx 0 5rpx;" v-for="(item,index) in publicMsg" v-if="!item.isRead"  @click="gotoOpenMsg(item.announcementId)" :key="index">
						<view style="margin-left: -20px;" slot="title">{{item.title}}</view>
						<view style="font-size: 22rpx;position: relative;bottom: 7px;margin-left: -20px;" slot="label">{{new Date(item.updateTime).toLocaleDateString()}}</view>
						<u-avatar style="" slot="icon" size="55" :src="item.userDO.avatarUrl"></u-avatar>
					</u-cell-item>
				</u-read-more>
			</u-cell-group>
			<u-cell-group v-if="this.taskMsg && this.taskMsg.filter(f=>!f.isRead).length" title="任务">
				<u-read-more :toggle="true">
					<u-cell-item style="padding: 5rpx 5rpx 0 5rpx;" v-for="(item,index) in taskMsg" v-if="!item.isRead"   @click="gotoOpenTaskMsg(item.taskId)" :key="index">
						<view style="margin-left: -20px;" slot="title">{{item.taskName}}</view>
						<view style="font-size: 22rpx;position: relative;bottom: 7px;margin-left: -20px;" slot="label">{{new Date(item.startTime).toLocaleDateString()}}</view>
						<u-avatar slot="icon" size="55"></u-avatar>
					</u-cell-item>
				</u-read-more>
			</u-cell-group> 
			<u-empty style="margin-top: 60%;" v-if="(this.publicMsg && this.publicMsg.filter(f=>!f.isRead).length) && (this.taskMsg && this.taskMsg.filter(f=>!f.isRead).length)" text="暂时无未读消息" mode="message"></u-empty>
		</view>
		<!-- 已读信息 -->
		<view v-if="current==1">
			<u-cell-group v-if="this.publicMsg && this.publicMsg.filter(f=>f.isRead).length" title="公告">
				<u-read-more :toggle="true">
					<u-cell-item style="padding: 5rpx 5rpx 0 5rpx;" v-for="(item,index) in publicMsg" v-if="item.isRead"  @click="gotoOpenMsg(item.announcementId,item.isRead)" :key="index">
						<view style="margin-left: -20px;" slot="title">{{item.title}}</view>
						<view style="font-size: 22rpx;position: relative;bottom: 7px;margin-left: -20px;" slot="label">{{new Date(item.updateTime).toLocaleDateString()}}</view>
						<u-avatar style="" slot="icon" size="55" :src="item.userDO.avatarUrl"></u-avatar>
					</u-cell-item>
				</u-read-more>
			</u-cell-group>
			<u-cell-group v-if="this.isReadTaskList && this.isReadTaskList.filter(f=>f.isRead).length" title="任务">
				<u-read-more :toggle="true">
					<u-cell-item style="padding: 5rpx 5rpx 0 5rpx;" v-for="(item,index) in isReadTaskList" v-if="item.isRead"   @click="gotoOpenTaskMsg(item.taskId,item.isRead)" :key="index">
						<view style="margin-left: -20px;" slot="title">{{item.taskName}}</view>
						<view style="font-size: 22rpx;position: relative;bottom: 7px;margin-left: -20px;" slot="label">{{new Date(item.startTime).toLocaleDateString()}}</view>
						<u-avatar slot="icon" size="55"></u-avatar>
					</u-cell-item>
				</u-read-more>
			</u-cell-group> 
			<u-empty style="margin-top: 60%;" v-else text="暂时无已读消息" mode="message"></u-empty>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				isReadTaskList:[]
			}
		},
		methods: {
			gotoOpenMsg(id) {
				this.$u.route({
					url: "pages/msg/openMsg",
					params: {
						id: id
					}
				})
			},
			gotoOpenTaskMsg(id,flag){
				if(flag){
					//已阅读的任务消息
					this.$u.route({
						url: "pages/msg/openTaskMsg",
						params: {
							id: id
						}
					})
				}else{
					//未阅读的任务消息
					let data = {
						"userId":this.user.userId,
						"taskId":id
					}
					this.$u.http.post("/msg/readTask",this.qs.stringify(data)).then(res=>{
						if(res.data){
							this.$store.commit("updateTaskMsg",id)
							this.$u.route({
								url: "pages/msg/openTaskMsg",
								params: {
									id: id
								}
							})
						}
					})
				}
			},
			/**
			 * 获取圈已读取的任务消息
			 */
			getAllIsReadTask(){
				this.$u.http.get(`/msg/getAllIsReadTask/${this.user.userId}`).then(res=>{
					if(res.data){
						this.isReadTaskList = res.data
						this.$store.commit("isReadTaskList",res.data)
					}
				})
			},
			change(index) {
							this.current = index;
						}
		},
		computed: {
			publicMsg() {
				return this.$store.state.publicMsg
			},
			taskMsg(){
				return this.$store.state.taskMsg
			},
			user(){
				return this.$store.state.user
			},
		},
		watch:{
			current(val){
				if(val=="1"){
					this.getAllIsReadTask()
				}
			}
		},
 		created() {
			this.getAllIsReadTask()
		} 
	
	}
</script>

<style>

</style>
